<template>
  <FixedDialogLayout :id="sid">
    <div class="PlayerList">
      <div class="PlayerList--close" @click="closeAction"></div>
      <div class="PlayerList--content">
        <div class="PlayerList--content__screen">
          <H5VideoPlayer v-if="cameraArr.length && activeCamera && activeCamera.indexCode" :camera="activeCamera"></H5VideoPlayer>
          <NoDataEmpty v-else :img="NoPlayerImg" tips="暂无视频资源" tipsStyle="font-family: PingFangSC-Regular;font-size: 16px;color: rgba(255,255,255,0.4);margin-top: 24px;"></NoDataEmpty>
        </div>
        <div class="PlayerList--content__cameras">
          <el-scrollbar height="610px">
            <div class="cameraslist">
              <template v-if="cameraArr.length">
                <div class="cameraslist--cameraPanel" :class="{active: activeCamera.indexCode === item.indexCode}"
                     v-for="item in cameraArr" :key="item.indexCode" @click="chooseCameraAction(item)">
                  {{item.name}}
                </div>
              </template>
              <div v-else style="height: 600px;">
                <NoDataEmpty :img="false" tips="暂无数据" tipsStyle="font-family: PingFangSC-Regular;font-size: 16px;color: rgba(255,255,255,0.4);margin-top: 24px;"></NoDataEmpty>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </FixedDialogLayout>
</template>

<script setup>
import H5VideoPlayer from "@/components/h5player/H5VideoPlayer.vue";
import FixedDialogLayout from "@/components/common/FixedDialogLayout.vue";
import NoDataEmpty from '@/components/common/NoDataEmpty.vue'
import NoPlayerImg from '@/assets/images/armyScreen/暂无视频@2x.png'

const sid = Math.floor(Math.random() * 1000000000000000)
const activeCamera = ref({})

const props = defineProps({
  cameraArr: {
    type: Array,
    default: () => {
      return []
    }
  }
})

watch(props.cameraArr, () => {
  if (props.cameraArr) { // 如果数组长度大于1，默认选择第一个
    chooseCameraAction(props.cameraArr[0])
  }
}, {
  immediate: true
})

onMounted(() => {
})

// 切换 摄像头
function chooseCameraAction (cameraObj) {
  activeCamera.value = {}
  nextTick(() => {
    setTimeout(() => {
      activeCamera.value = cameraObj
    }, 50)
  })
}

const $emit = defineEmits(['close'])
function closeAction() {
  $emit('close')
}

</script>

<style lang="scss" scoped>
.PlayerList{
  width: 1449px;
  height: 724px;
  //border: 1px solid red;
  //background-image: linear-gradient(270deg, rgba(238,238,238,0.03) 0%, #D8D8D8 100%);
  padding: 33px 35px 35px 34px;
  margin: 0 auto;
  //margin-top: 120px;
  position: relative;
  background-image: url("@/assets/images/armyScreen/playerListBg.png");
  background-size: cover;
  &--close{
    background-image: url("@/assets/images/armyScreen/playerListClose.png");
    background-size: cover;
    width: 36px;
    height: 36px;
    position: absolute;
    top: -46px;
    right: 0;
    cursor: pointer;
  }
  &--content{
    padding: 24px 0px 24px 46px;
    display: flex;
    width: 1380px;
    height: 656px;
    background-image: linear-gradient(180deg, #000000 1%, #000000 100%);
    border-radius: 0px 0px 0px 8px 0px 0px;
    &__screen{
      width: 1010px;
      height: 608px;
      //border: 1px solid red;
      margin-right: 16px;
    }
    &__cameras{
      width: 300px;
      .cameraslist{
        &--cameraPanel{
          &.active{
            width: 280px;
            background-image: linear-gradient(270deg, rgba(17,85,152,0.58) 0%, #00A3FA 100%);
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
          }
          width: 280px;
          height: 28px;
          line-height: 28px;
          padding-left: 12px;
          background: rgba(32, 128, 247, 0.12);
          margin-bottom: 12px;

          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
          font-weight: 400;

          cursor: pointer;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis
        }
      }
    }
  }
}
</style>
